<template>
  <div>
    <div style="margin-top: 35px">
      <div>主题管理</div>
      <el-button type="primary" @click="setColor('1')">主题一</el-button>
      <el-button type="success" @click="setColor('2')">主题二</el-button>
      <el-button type="info" @click="setColor('3')">主题三</el-button>
      <el-button type="warning" @click="setColor('4')">主题四</el-button>
    </div>
    <div>
      <div>字体管理</div>
      <el-button type="primary" @click="setFontSize('1')">字体一</el-button>
      <el-button type="success" @click="setFontSize('2')">字体二</el-button>
      <el-button type="info" @click="setFontSize('3')">字体三</el-button>
      <el-button type="warning" @click="setFontSize('4')">字体四</el-button>
    </div>
  </div>
</template>

<script>
// import { defineComponent } from "vue";
export default {
  setup() {
    function setColor(index) {
      document.getElementById("app").className = "theme" + index;
      window.localStorage.setItem("bgcolor", "theme" + index);
    }
    function setFontSize(index) {
      document.getElementById("app").className = "font" + index;
    }
    return {
      setColor,
      setFontSize,
    };
  },
};
</script>

<style></style>
